// @ts-nocheck
/*
 * @Author: WangZhiJie
 * @Date: 2024-03-26 14:54:33
 * @LastEditTime: 2024-04-03 14:35:22
 * @Description: 
 * @FilePath: \ga-smart-city-app-front\src\components\PersonnelModel\index.tsx
 */
import React, { useState, useEffect } from "react";
import { SearchBar, Button,InfiniteScroll } from 'antd-mobile';
import { CheckOutline } from 'antd-mobile-icons'
import { getPersonnelList } from '@/pages/myWork/service';
import './index.less'
let timer = null;
interface IselectData {
    id: string;
    name: string;
    sex: string;
    phone: string;
    initData: string;
}
interface IPersonnelModel {
    visible: boolean;
    setVisible: (isa: boolean) => void;
    onChange: (data: Array<IselectData>) => void;
    mode?: string
}
/**
 * 
 * @param visible 组件的显隐
 * @param setVisible 控制组件的显隐
 * @param onChange 选择的数据回调
 * @param mode 多选 | 单选 
 * @param initData 初始数据
 * @returns 
 */
const PersonnelModel: React.FC<IPersonnelModel> = ({ visible = false,initData='', setVisible, onChange, mode = "tags",details }) => {
    const [keyword, setKeyword] = useState<string>('')
    const [data, setData] = useState<IselectData[]>([])
    const [current, setCurent] = useState<number>(1)
    const [isfiring, setIsfiring] = useState<boolean>(false)
    const [selectData, setSelectData] = useState<IselectData[]>([]);
    const [hasMore, setHasMore] = useState<boolean>(true);
    const loadMore = async (curr?: number) => {
        
        setCurent(curr ? curr : (v) => v += 1)
        const { data: { records } } = await getPersonnelList({
            size: 10,
            current,
            type: details?.type,
            planId: details?.id,
            keyword
        })
        const data = (records && records.length) ? records : [];
        if (current === 1) {
            setData(data)
        } else {
            setData(v => [...v].concat(data))
        }
        setHasMore(data.length > 0)
    }
    useEffect(() => {
        if (isfiring) {
            setData([])
            setHasMore(true)
            loadMore(1)
        }
    }, [isfiring])
    useEffect(() => {
        const datas = [...data];
        
        if(initData){
            let initArr = initData.split(',');
            if(initArr.length){
                setSelectData(datas.filter((item)=>initArr.indexOf(item.name)>-1))
            }
        }
    }, [data,initData])
    const onChangeValue = (val: string) => {
        setKeyword(val)
        clearTimeout(timer);
        timer = setTimeout(() => {
            setIsfiring(true)
        }, 500);
        setIsfiring(false)
    }
    const onSelectData = (item: IselectData) => {
        const data = [...selectData];
        const index = data.map(({ id }) => id).indexOf(item.id);
        if (mode === 'tags') {
            if (index > -1) {
                setSelectData([])
            } else {
                setSelectData([item])
            }
        } else if (mode === 'multiple') {
            if (index > -1) {
                data.splice(index, 1)
            } else {
                data.push(item)
            }
            setSelectData(data)
        } else {
            setSelectData([item])
        }
    }
    const onConfirm = () => {
        onChange(selectData)
        setVisible(false)
    }
    return <div className="personnelModel">
        <div className="mask" onClick={() => setVisible(false)} style={{ display: visible ? 'block' : 'none' }}></div>
        <div className={`centent_boxs ${visible ? 'personnelModelShow' : ''}`}>
            <div className="head_box">
                <div className="head">
                    <Button color='primary' fill='none' onClick={() => setVisible(false)}>取消</Button>
                    <Button color='primary' fill='solid' onClick={onConfirm}>确定</Button>
                </div>
                <div className="search_box">
                    <SearchBar
                        placeholder={`请输入关键字查询`}
                        showCancelButton
                        onChange={onChangeValue}
                        style={{
                            '--border-radius': '100px',
                            '--background': '#ffffff',
                            '--height': '48px',
                            '--padding-left': '12px',
                        }}
                    />
                </div>
            </div>
            <div className="list_boxs">
                {
                    data.map((item, index) => {
                        return <div className="lists" key={index} onClick={() => onSelectData(item)}>
                            <div className="left_text">
                                <span>{item.name}</span>
                                <span>{item.sex}</span>
                                <span>{item.phone}</span>
                            </div>
                            {
                                selectData.map(({ id }) => id).includes(item.id) ?
                                    <div className="icon">
                                        <CheckOutline />
                                    </div> : null
                            }

                        </div>
                    })
                }
            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </div>
        </div>
    </div>
}
export default PersonnelModel